<template>
  <div class="growthVal-wpr">
    <div class="value-container">
      <div class="value-line" :style="{'left': item.recorded }" v-show="isShowPhone(item.recorded)">
        <div class="photo" :style="{'backgroundImage': 'url('+ item.usrUrl + ')'}"></div>
      </div>
      <ul class="value-num">
        <li class="growthVal-num"></li>
        <li v-for="num in 5" class="growthVal-num">{{Math.ceil(maxExp * (0.25 * num))}}</li>
      </ul>
      <div class="value-record">
        <div class="record" :style="{'width': item.recorded }"></div>
      </div>
    </div>
    <div class="shop-container">
      <div class="shop-name">
        <span class="img-wapr" :style="{backgroundImage: 'url(' + item.mchtUrl + ')'}">
          <!-- <img :src="item.mchtUrl" alt="mchtImg"> -->
        </span>
        <span class="name">{{item.mchtName}}({{item.mchtAddr}})</span>
      </div>
      <div class="shop-totalVal">
        <span class="growth-icon"><i class="icon iconfont icon-chengchangzhi- icon_code"></i></span>
        <span class="growth-val">{{item.exp}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    maxExp: [String, Number],
    photoRatio: [String],
    item: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    isShowPhone(val) {
      let recorded = Number(val.slice(0, -1)) // 成长值比例 百分比
      let photoRatio = Number(this.photoRatio.slice(0, -1)) // 照片比例 百分比
      console.log(recorded);
      console.log(photoRatio);
      console.log(recorded >= photoRatio);
      return (recorded >= photoRatio) // 百分比
    }
  }
}
</script>

<style lang="scss" scoped>
  $grothVal-height: 9.4rem;
  $value-container-height: 6.4rem;
  $value-height: 2rem;
  .growthVal-wpr {
    width: 100%;
    // height: $grothVal-height;
    background-color: #fff;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    overflow: hidden;
  }
  .value-container {
    width: 100%;
    // height: $value-container-height;
    overflow: hidden;
    position: relative;
    .value-line {
      position: absolute;
      top: .8rem;
      margin-left: -0.14rem;
      bottom: 0;
      left: 80%;
      width: 2px;
      transform: translate(1px, 0);
      background-color: #f95a7c;
      .photo {
        position: absolute;
        width: 2.4rem;
        height: 2.4rem;
        background-color: #ccc;
        border-radius: 50%;
        left: -1.2rem;
        top: -.2rem;
        background-image: url(../../../images/growth_img.png);
        background-size: cover;
        transform: translate(1px, 0);
      }
    }
    .value-num {
      width: 100%;
      // height: $value-height;
      margin-top: 3rem;
      &::after {
        content: "";
        display: block;
        clear: both;
      }
      li {
        float: left;
        width: 16.66%;
        height: $value-height;
        line-height: $value-height;
        text-align: left;
        color: #999;
        font-size: 1rem
      }
    }
    .value-record {
      width: 100%;
      height: .76rem;
      background-color: #ccc;
      .record {
        width: 80%;
        height: inherit;
        background-color: #f95a7c;
      }
    }
  }

  .shop-container {
    width: 100%;
    margin: 0.5rem 0;
    overflow: hidden;
    .shop-name {
      float: left;
      width: 84%;
      height: 2.4rem;
      // margin-top: 0.1rem;
      > span {
        display: block;
        float: left;
        line-height: 2.4rem;
        height: 2.4rem;
        &.img-wapr {
          width: 2.4rem;
          height: 2.4rem;
          overflow: hidden;
          background-color: #ccc;
          margin: 0 0.8rem 0 0.6rem;
          position: relative;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          // img {
          //   max-width: 100%;
          //   position: absolute;
          //   top: 50%;
          //   transform: translate(0, -50%);
          // }
        }
        &.name {
          width: 78%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1rem
        }
      }
    }
    .shop-totalVal {
      width: 16%;
      float: left;
      span {
        display: block;
        float: left;
        line-height: 2.4rem;
        height: 2.4rem;
        &.growth-icon {
          padding-right: 0.24rem
        }
      }
    }
  }


  .loading-box {
    margin-bottom: 2rem;
    overflow: hidden;
  }
</style>
